<script setup lang="ts">
  const colorMode = useColorMode()
  const color = computed(() => (colorMode.value === 'dark' ? '#111827' : 'white'))
  const userStore = useUserStore()

  useHead({
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'author',
        name: 'author',
        content: '迷之de小孩灬,lginsane'
      },
      {
        hid: 'keywords',
        name: 'keywords',
        content: '迷之de小孩灬,lginsane,个人博客,前端文章,前端博客,前端技术,文章,人工智能,美食,音乐'
      },
      { key: 'theme-color', name: 'theme-color', content: color }
    ],
    link: [{ rel: 'icon', href: '/favicon.ico' }],
    htmlAttrs: {
      lang: 'en'
    }
  })

  if (process.client) {
    userStore.load()
  }
</script>

<template>
  <div>
    <NuxtLoadingIndicator />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>

    <UNotifications />
  </div>
</template>
